<template>
    <div class="ele-body">
        <el-card shadow="never">
            <Search @search="reload" />
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                cache-key="appTable">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit()">
                        新建
                    </el-button>
                    <el-button size="small" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                        :disabled="!selection.length" @click="removeBatch">
                        删除
                    </el-button>
                </template>
                <!-- 类型列 -->
                <template v-slot:type="{ row }">
                    {{ row.type === 1 ? "推荐" : "破解" }}
                </template>
                <!-- 状态列 -->
                <template v-slot:status="{ row }">
                    {{ row.status === 0 ? "隐藏" : "显示" }}
                </template>
                <!-- 应用图标列 -->
                <template v-slot:img="{ row }">
                    <el-image v-if="row.img" style="width: 60px; height: 60px" :src="row.remoteUrl || row.img"
                        :preview-src-list="[row.remoteUrl || row.img]" />
                </template>
                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                    <el-link type="primary" :underline="false" @click="openEdit(row)">
                        修改
                    </el-link>
                    <el-popconfirm class="ele-action" title="确定要删除此应用吗？" @confirm="remove(row)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </ele-pro-table>
            <Edit :visible.sync="showEdit" :data="current" @done="reload" />
        </el-card>
    </div>
</template>

<script>
import { pageApps, removeApp, removeApps } from '@/api/appList';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import { uploadToImg, formatDate } from "@/utils/formate";
import { time } from 'echarts';
export default {
    name: 'AppTable',
    components: { Search, Edit },
    data() {
        return {
            imageCache: {},
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    columnKey: 'index',
                    type: 'index',
                    label: '序号',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    prop: 'name',
                    label: '应用名称',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    slot: 'name'
                },
                {
                    prop: 'type',
                    label: '类型',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 80,
                    slot: 'type'
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    // sortable: 'custom',
                    width: 80,
                    resizable: false,
                    slot: 'status',
                    showOverflowTooltip: true
                },
                {
                    prop: 'img',
                    label: '应用图标',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    slot: 'img'
                },
                {
                    prop: 'href',
                    label: '应用地址',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'remark',
                    label: '备注',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'index',
                    label: '顺序',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 80
                },
                {
                    prop: 'totals.click',
                    label: '总点击数',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (_row, _column, cellValue) => {
                        return cellValue || 0;
                    }
                },
                // {
                //     prop: 'days.click1',
                //     label: '今日点击',
                //     sortable: 'custom',
                //     showOverflowTooltip: true,
                //     minWidth: 110,
                //     // formatter: (row) => {
                //     //     return this.onGetClick(row.days, 1);
                //     // }
                // },
                // {
                //     prop: 'days.click7',
                //     label: '本周点击',
                //     sortable: 'custom',
                //     showOverflowTooltip: true,
                //     minWidth: 110,
                //     // formatter: (row) => {
                //     //     return this.onGetClick(row.days, 7);
                //     // }
                // },
                // {
                //     prop: 'days.click30',
                //     label: '本月点击',
                //     sortable: 'custom',
                //     showOverflowTooltip: true,
                //     minWidth: 110,
                //     // formatter: (row) => {
                //     //     return this.onGetClick(row.days, 30);
                //     // }
                // },
                {
                    prop: 'createTime',
                    label: '创建时间',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (row) => row.createTime ? formatDate(new Date(row.createTime)) : ''
                },
                {
                    prop: 'updateTime',
                    label: '修改时间',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (row) => row.updateTime ? formatDate(new Date(row.updateTime)) : ''
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 120,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
            ],
            // 表格选中数据
            selection: [],
            time:new Date(),
        };
    },
    methods: {
        /* 表格数据源 */
        async datasource({ page, limit, where, order }) {
            let res = await pageApps({ ...where, ...order, page, limit })
            res.data.forEach(async v => {
                if (!v.img) return
                if (this.imageCache[v.img]) {
                    v.img = this.imageCache[v.img];
                } else {
                    v.img = await uploadToImg(v.img,1);
                    this.imageCache[v.img] = v.img;
                }
            })
            return res
        },
        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },
        /* 打开编辑弹窗 */
        openEdit(row) {
            this.current = row;
            this.showEdit = true;
        },
        /* 删除 */
        remove(row) {
            // const loading = this.$loading({ lock: true });
            removeApp({ ids: [row._id] })
                .then((msg) => {
                    // loading.close();
                    console.log(33333, msg);
                    this.$message.success(msg);
                    this.reload();
                })
                .catch((e) => {
                    // loading.close();
                    this.$message.error(e.message);
                });
        },
        /* 批量删除 */
        removeBatch() {
            if (!this.selection.length) {
                this.$message.error('请至少选择一条数据');
                return;
            }
            this.$confirm('确定要删除选中的应用吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({ lock: true });
                    removeApps(this.selection.map((d) => d._id))
                        .then((msg) => {
                            loading.close();
                            this.$message.success(msg);
                            this.reload();
                        })
                        .catch((e) => {
                            loading.close();
                            this.$message.error(e.message);
                        });
                })
                .catch(() => { });
        },
        /**
         * 获取点击数量
         * @param daysData
         * @param time
         * @param startTime
         */
        onGetClick(daysData, time, startTime = 0) {
            let num = 0;
            if (daysData && JSON.stringify(daysData) !== "{}") {
                for (let i = startTime; i < time; i++) {
                    let day = utils.formatDate(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * i)), "yyyy-MM-dd")
                    if (daysData[day]) num += daysData[day].click || 0;
                }
            }
            return num;
        }
    }
};
</script>